<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
	<head><!--头部-->
		<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
		<meta name="Keywords" content="关键词">
		<meta name="Description" content="描述">
		<title>Document</title>
		<style>/*css样式表的衣柜*/
		*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/
		body{background:url("images/bodyBg.jpg");}
		#wrap{width:980px;margin:100px auto;}
		#wrap ul li{width:180px;height:105px;margin:30px 5px;position:relative;
		background:rgba(0,0,0,.7);list-style:none;float:left;}
		#wrap ul li:nth-child(9n+6){margin-left:100px;}
		#wrap ul li:before{
			content:"";
			position:absolute;
			width:180px;height:105px;background:rgba(0,0,0,.7);
			transform:rotate(-60deg);/*ccs3旋转*/
		}
		#wrap ul li:after{
			content:"";
			position:absolute;
			width:180px;height:105px;background:rgba(0,0,0,.7);
			transform:rotate(60deg);z-index:1;
		}
		img{position:absolute;left:0px;top:0px;right:0px;bottom:0px;
			margin:auto;z-index:2;transition:all 1s;/*CSS3动画过渡:ALL所有的属性*/}
		img:hover{transform:scale(1.5) rotate(360deg);/*CSS3放大及旋转*/}
		</style>
	</head>
	<body><!--身体-->
		<div id="wrap">
			<ul>
				<li><img src="images/1.png"/></li>
				<li><img src="images/2.png"/></li>
				<li><img src="images/3.png"/></li>
				<li><img src="images/4.png"/></li>
				<li><img src="images/5.png"/></li>
				<li><img src="images/6.png"/></li>
				<li><img src="images/7.png"/></li>
				<li><img src="images/8.png"/></li>
				<li><img src="images/9.png"/></li>
				<li><img src="images/10.png"/></li>
				<li><img src="images/11.png"/></li>
				<li><img src="images/12.png"/></li>
				<li><img src="images/13.png"/></li>
				<li><img src="images/14.png"/></li>
			</ul>
		</div>
		<!--
			CSS3 nth-child()选择器
			1、nth-child(2)//选择到对应序号的元素
			2、nth-child(an+b)//a为倍数，n（0-..n） b 余数
			nth-child(an+6) n=1 a(1-8)

			伪类：
			before,相当于在元素内容的前面添加内容 行内元素
			
			after 相当于在元素内容的后面添加内容 行内元素
				
			行内元素设置宽高度：
			1、display:block,inline-block
			2、定位,absolute
			3、浮动

			元素自适应居中方法：
			1、margin padding百分比
			2、position:absolute;left:50%;top:50%;margin-left:-子元素宽度/2;
			margin-top:-子元素高度/2;
			3、position:absolute;left:0px;top:0px;right:0px;bottom:0px;
			margin:auto;
		-->
	</body>
</html>
